<template>
    <div class="Parentbox">
        <div class="bovin">
            <div class="basicinformation">
                <div class="headline">
                    <span class="lineofelevation"></span>
                    <span class="caption">基础信息</span>
                </div>
                <div>
                    <el-form label-width="100px">
                        <el-form-item label="商品分类">
                            <el-button type="primary" size="mini" plain style="margin-right: 20px; width: 90px;"
                                @click="info">货款</el-button>
                            <el-button type="primary" size="mini" plain style="width: 90px;" @click="infoone">理财</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form label-width="100px" inline>
                        <el-form-item label="商品编码">
                            <el-input style="width: 535px;"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称" style="margin-left: 60px;">
                            <el-input style="width: 545px;"></el-input>
                        </el-form-item>
                        <el-form-item label="产品联系人">
                            <el-input style="width: 535px;"></el-input>
                        </el-form-item>
                        <el-form-item label="产品联系方式" style="margin-left: 60px;">
                            <el-input style="width: 545px;"></el-input>
                        </el-form-item>
                        <el-form-item label="活动形式">
                            <el-input type="textarea" style="width: 1249px;" maxlength="100" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="dottedline"></div>
            <!-- 分割线 -->
            <div class="Classificationdisplay">
                <div class="headline">
                    <span class="lineofelevation"></span>
                    <span class="caption">分类显示信息</span>
                </div>
                <div v-if="showmessage">
                    <el-form label-width="100px">
                        <el-form-item label="属性信息">
                            <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 40%; margin-right: 20px;">
                                <el-option value="shanghai" label="融资渠道/银行"></el-option>
                                <el-option value="shanghai" label="区域二"></el-option>
                            </el-select>
                            <el-button type="text">删除</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 40%; margin-right: 20px;">
                                <el-option value="shanghai" label="融资期限/36个月以下"></el-option>
                                <el-option value="shanghai" label="区域二"></el-option>
                            </el-select>
                            <el-button type="text">删除</el-button>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" style="margin-left: 100px;">新增</el-button>
                </div>
                <div v-else>
                    <el-form label-width="100px" :model="form">
                        <el-form-item label="属性信息">
                            <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 40%; margin-right: 20px;">
                                <el-option label="1" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                            <el-button type="text">删除</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 40%; margin-right: 20px;">
                                <el-option label="2" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                            <el-button type="text">删除</el-button>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" style="margin-left: 100px;">新增</el-button>
                </div>
            </div>
            <div style="height: 90px;"></div>
            <div class="dottedline"></div>
            <!-- 分割线 -->
            <div class="commodity">
                <div class="headline">
                    <span class="lineofelevation"></span>
                    <span class="caption">商品详情</span>
                </div>
                <div style="height: 50px;"></div>
                <div style="display: flex;margin-left: 70px;  font-size: large;
                                            font-weight: 600;">
                    <div style="margin-right: 20px;">商品介绍</div>
                    <RichText @change="changeWang"></RichText>
                    <!-- 富文本编辑器 -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import RichText from "./components/RichText.vue"
export default {
    components: {
        RichText
    },
    data() {
        return {
            showmessage: true,
            form: {
                region: "123"
            }
        }
    },
    methods: {
        info() {
            this.showmessage = true
        },
        infoone() {
            this.showmessage = false
        },
        changeWang(html) {
            console.log(html, '富文本')
        }
    }
}
</script>

<style lang="less" scoped>
.Parentbox {
    padding: 0 0 0 110px;
}

.bovin {
    height: 1587px;

    .headline {
        display: flex;
        align-items: center;

        .lineofelevation {
            width: 4px;
            height: 20px;
            margin: 10px 10px 0 0;
            background-color: #2a87ff;
            display: inline-block;
            border-radius: 5px;
        }

        .caption {
            font-size: large;
            font-weight: 600;
            margin: 10px 0 0 0;
        }
    }

    .dottedline {
        width: 100%;
        height: 3px;
        background: radial-gradient(#d9d9d9, #d9d9d9 4px, transparent 4px, transparent);
        background-size: 15px 100%;
    }

}

/deep/.el-button--mini {
    border-radius: 0;
}
</style>